<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style/style.css">
</head>
<body>
	
	<!-- 左侧放大镜容器 -->
	<div class="container">
		<div class="small"> 
			<!-- 贴膜 -->
			<div class="wrap"></div>
			<!-- 左侧放大镜图片 -->
			<img src="images/timg.jpg" alt="">
			<!-- 小盒子 -->
			<span class="grayBox"></span>

			
		</div>
		<div class="choice-btn">
				<img src="images/timg.jpg" alt="">
				<img src="https://img.zcool.cn/community/01f9d55efda3d5a8012066216f132c.jpg@260w_195h_1c_1e_1o_100sh.jpg" alt="">
		</div>
	</div>
	<!-- 大图容器 -->
	<div class="big">
		<!-- 大图图片 -->
		<img src="images/timg.jpg" alt="">
	</div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
	function Magnifier(){
		// 正方形小盒子
		this.square = $(".grayBox");
		// 小盒子容器
		this.small  = $(".small");
		// 小图 ;
		this.small_img = document.querySelector(".small img");
		// 大盒子容器
		this.big    = document.querySelector(".big");
		// 大图片
		this.big_img = document.querySelector(".big img");
		// 找到按钮 
		this.index = 0;
		this.btns = document.querySelectorAll(".choice-btn img");
		//获取小盒子的宽高
		this.square_size = {
			width  : parseInt(getComputedStyle(this.square).width),
			height : parseInt(getComputedStyle(this.square).height)
		}
		// 获取小盒子宽高;
		this.small_size = {
			width : this.small.offsetWidth,
			height : this.small.offsetHeight,
		}
		// 获取大容器的宽高;
		this.big_size = {
			width  : parseInt(getComputedStyle(this.big).width),
			height : parseInt(getComputedStyle(this.big).height)
		}
		// 大图片的宽高;
		this.big_img_size = {
			width  : parseInt(getComputedStyle(this.big_img).width),
			height : parseInt(getComputedStyle(this.big_img).height)
		}

		this.bindEvent();
	}
	//事件绑定
	Magnifier.prototype.bindEvent = function(){
		//变量接收当前this
		var self = this;
		//小盒子鼠标移动事件驱动函数
		this.small.onmouseover = function(){
			self.square.style.display = "block";
			self.big.style.display    = "block";
		}
		//小盒子鼠标移出事件驱动函数
		this.small.onmouseout = function(){
			self.square.style.display = "none";
			self.big.style.display    = "none";
		}
		//小盒子鼠标移动事件驱动函数（边界判断和赋值处理）
		this.small.onmousemove = function( evt ){
			//事件获取兼容
			var e = evt || event ;
			//存储鼠标到小盒子距离的中间的距离
			var _left = e.offsetX - 50;
			var _top  = e.offsetY - 50;
			//小盒子边界处理，不让边界溢出
			if(_left < 0 ){
				_left = 0;
			}
			if(_top < 0 ){
				_top = 0;
			}
			//获取小盒子到大盒子的左边框值
			var max_left =  self.small_size.width - self.square_size.width - 8 ;
			//边界处理
			if( _left > max_left ){
				_left = max_left;
			}
			//获取小盒子到大盒子的上边框的值
			var max_top = self.small_size.height - self.square_size.height - 8 ;
			//边界处理
			if( _top > max_top){
				_top = max_top;
			}
			//赋值
			self.square.style.left = _left  + "px";
			self.square.style.top  = _top   + "px";

			//获取移动距离的百分比
			var prop_left = (_left / max_left).toFixed(2);
			var prop_top  = (_top  / max_top).toFixed(2);
			//大盒子移动
			var big_box_max_left = self.big_img_size.width - self.big_size.width;
			var big_box_max_top  = self.big_img_size.height - self.big_size.height;
			//大图片盒子的宽高
			self.big_img.style.left = -big_box_max_left * prop_left + "px";
			self.big_img.style.top = - big_box_max_top * prop_top + "px";
			
		}
		//下方按钮循环渲染图片
		for(var i = 0 ; i < this.btns.length ; i ++){
			this.btns[i].index = i;
			this.btns[i].onmouseover = function(){
				self.index = this.index;
				self.small_img.src = this.src;
				self.big_img.src   = this.src;
			}
		}
	
	}

	var mf = new Magnifier();

</script>
</html>